<template>
  <div>
    <el-form ref="form" :model="book" label-width="80px">
      <el-form-item label="书名">
        <el-select v-model="bookName" placeholder="请输入书名">
          <el-option
            v-for="item in options"
            :key="item.bookName"
            :label="item.bookName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="新增章节">
        <el-input v-model="book.chapter"  style="width: 217px;" placeholder="请输入新增章节名称"></el-input>
      </el-form-item>

      <el-form-item label="审核">
        <el-select v-model="book.state" placeholder="审核">
          <el-option label="已通过" value=1 />
          <el-option label="审核中" value=2 />
          <el-option label="未通过" value=3 />
        </el-select>
      </el-form-item>



      <el-form-item>
        <el-button type="primary" @click="onAdd">添加</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserMemberAddView",
  data(){       //data:{}
    return {
      book:{
        id:0,
        chapter:"",
      },
      options:[],
      bookName:'',
    }
  },
  created(){
    this.getData()
  },
  methods: {
    onAdd() {
      //创建表格对象
      var formData = new FormData()
      formData.append("bookId",this.bookName)
      // for (const arr in this.book) {
      //   formData.append(arr, this.book[arr])
      // }

      //请给我写一个确定添加的前置条件
      if (confirm("确定要添加吗")) {
        // alert(this.bookName)
        //根据bookId查询到书的名字   /book/queryByBook/{bookId}
        axios({
          url: "/api/book/queryByBook/"+this.bookName,
          method: "post",
          data: formData,
          //添加请求头
          // headers: {"Content-Type": "multipart/form-data"}
          headers: {"Authorization": "Bearer " + this.$store.state.user.token}
        }).then(res => {
          //bookName
          // console.log(res.data.data)
          var formData1 = new FormData();
          for (const arr in this.book) {
            formData1.append(arr, this.book[arr])
          }
          formData1.append("bookName",res.data.data)
          formData1.append("bookId",this.bookName)
          axios({
            url: "/api/chapters/add",
            method: "post",
            data: formData1,
            //添加请求头     id:0, chapter:"",   /add    bookId
            // headers: {"Content-Type": "multipart/form-data"}
            headers: {"Authorization": "Bearer " + this.$store.state.user.token}
          }).then(res => {
            // alert(res.data.code)
            if(res.data.code==1){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              //返回分类表
              this.$router.push("/novel/novelChapterView")
            }else {
              this.$message({
                message: res.data.message,
                type:'error'
              });
            }
          })

        })




      }
    },
    cancel() {
      this.$router.push("/novel/novelChapterView")
    },

    // 获取数据
    getData() {
      axios({
        //获取所有的用户的信息和他们的角色信息
        url: '/api/chapters/queryAllBook',
        method: 'post',
        headers: {"Authorization": "Bearer " + this.$store.state.user.token}
      }).then(res => {
        // console.log(res.data.data.list[0].moduleList)
        // console.log(res.data.data)
        // this.bookName=res.data.data.list.forEach(function (item) {
        //   this.options.push({
        //     bookName: item.bookName
        //   })
        // }, this)
        this.options=res.data.data
        this.options.forEach(item=>{
          item.bookName=item.bookName
        })


        // console.log(this.role)
        // for (const arr in this.role) {
        //     this.role.name=this.role[arr].roleList.name
        // }

      })
    },
  }
}
</script>

<style scoped>

</style>
